<template>
  <div class="user-overview-report">
    <!-- 核心指标卡片 -->
    <div class="metrics-section">
      <h3 class="section-title">核心用户指标</h3>
      <el-row :gutter="20">
        <el-col :span="6" v-for="metric in coreMetrics" :key="metric.key">
          <el-card class="metric-card">
            <div class="metric-content">
              <div class="metric-icon" :style="{ color: metric.color }">
                <el-icon :size="32">
                  <component :is="metric.icon" />
                </el-icon>
              </div>
              <div class="metric-info">
                <div class="metric-value">{{ metric.value }}</div>
                <div class="metric-label">{{ metric.label }}</div>
                <div class="metric-change" :class="metric.changeType">
                  <el-icon>
                    <component :is="metric.changeType === 'increase' ? 'TrendCharts' : 'Bottom'" />
                  </el-icon>
                  {{ metric.change }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用户增长趋势图 -->
    <div class="chart-section">
      <h3 class="section-title">用户增长趋势</h3>
      <el-card>
        <div class="chart-container" ref="growthChartRef" v-loading="loading"></div>
      </el-card>
    </div>

    <!-- 用户分布分析 -->
    <div class="distribution-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <h3 class="section-title">年龄分布</h3>
          <el-card>
            <div class="chart-container" ref="ageChartRef" v-loading="loading"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <h3 class="section-title">地域分布</h3>
          <el-card>
            <div class="chart-container" ref="regionChartRef" v-loading="loading"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用户活跃度分析 -->
    <div class="activity-section">
      <h3 class="section-title">用户活跃度分析</h3>
      <el-card>
        <el-table :data="activityData" stripe>
          <el-table-column prop="period" label="时间段" width="120" />
          <el-table-column prop="totalUsers" label="总用户数" width="120" />
          <el-table-column prop="activeUsers" label="活跃用户数" width="120" />
          <el-table-column prop="activeRate" label="活跃率" width="100">
            <template #default="{ row }">
              <el-tag :type="getActiveRateType(row.activeRate)">
                {{ row.activeRate }}%
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="newUsers" label="新增用户" width="120" />
          <el-table-column prop="retentionRate" label="留存率" width="100">
            <template #default="{ row }">
              <el-progress 
                :percentage="row.retentionRate" 
                :stroke-width="8"
                :show-text="true"
                :format="() => `${row.retentionRate}%`"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { 
  User, UserFilled, TrendCharts, Bottom, 
  DataAnalysis, Monitor 
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  dateRange: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 响应式数据
const growthChartRef = ref(null)
const ageChartRef = ref(null)
const regionChartRef = ref(null)

// 核心指标数据
const coreMetrics = ref([
  {
    key: 'totalUsers',
    label: '总用户数',
    value: '125,680',
    change: '+12.5%',
    changeType: 'increase',
    color: '#409EFF',
    icon: 'UserFilled'
  },
  {
    key: 'activeUsers',
    label: '活跃用户',
    value: '89,420',
    change: '+8.3%',
    changeType: 'increase',
    color: '#67C23A',
    icon: 'User'
  },
  {
    key: 'newUsers',
    label: '新增用户',
    value: '3,256',
    change: '+15.2%',
    changeType: 'increase',
    color: '#E6A23C',
    icon: 'TrendCharts'
  },
  {
    key: 'retentionRate',
    label: '留存率',
    value: '68.5%',
    change: '-2.1%',
    changeType: 'decrease',
    color: '#F56C6C',
    icon: 'DataAnalysis'
  }
])

// 用户活跃度数据
const activityData = ref([
  {
    period: '本周',
    totalUsers: 125680,
    activeUsers: 89420,
    activeRate: 71.2,
    newUsers: 3256,
    retentionRate: 68.5
  },
  {
    period: '上周',
    totalUsers: 122424,
    activeUsers: 86164,
    activeRate: 70.4,
    newUsers: 2890,
    retentionRate: 70.6
  },
  {
    period: '本月',
    totalUsers: 125680,
    activeUsers: 95210,
    activeRate: 75.8,
    newUsers: 12450,
    retentionRate: 72.3
  },
  {
    period: '上月',
    totalUsers: 113230,
    activeUsers: 87650,
    activeRate: 77.4,
    newUsers: 11200,
    retentionRate: 74.1
  }
])

// 方法
const getActiveRateType = (rate) => {
  if (rate >= 80) return 'success'
  if (rate >= 60) return 'warning'
  return 'danger'
}

const renderGrowthChart = () => {
  if (!growthChartRef.value) return

  const chart = echarts.init(growthChartRef.value)
  
  const option = {
    title: {
      text: '用户增长趋势',
      left: 'center',
      textStyle: { fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['总用户数', '新增用户', '活跃用户'],
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: [
      {
        type: 'value',
        name: '用户数',
        position: 'left'
      },
      {
        type: 'value',
        name: '新增用户',
        position: 'right'
      }
    ],
    series: [
      {
        name: '总用户数',
        type: 'line',
        data: [85000, 88000, 92000, 96000, 101000, 106000, 112000, 118000, 122000, 125000, 125680, 126000],
        smooth: true,
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '活跃用户',
        type: 'line',
        data: [60000, 62000, 65000, 68000, 72000, 75000, 79000, 83000, 86000, 88000, 89420, 90000],
        smooth: true,
        itemStyle: { color: '#67C23A' }
      },
      {
        name: '新增用户',
        type: 'bar',
        yAxisIndex: 1,
        data: [3000, 3200, 4000, 4200, 5000, 5200, 6000, 6200, 4000, 3000, 3256, 3500],
        itemStyle: { color: '#E6A23C' }
      }
    ]
  }

  chart.setOption(option)
  
  // 响应式调整
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

const renderAgeChart = () => {
  if (!ageChartRef.value) return

  const chart = echarts.init(ageChartRef.value)
  
  const option = {
    title: {
      text: '用户年龄分布',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '60%'],
        data: [
          { value: 25680, name: '18-25岁' },
          { value: 35420, name: '26-35岁' },
          { value: 28950, name: '36-45岁' },
          { value: 20150, name: '46-55岁' },
          { value: 15480, name: '55岁以上' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  chart.setOption(option)
  
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

const renderRegionChart = () => {
  if (!regionChartRef.value) return

  const chart = echarts.init(regionChartRef.value)
  
  const option = {
    title: {
      text: '用户地域分布',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安']
    },
    series: [
      {
        name: '用户数',
        type: 'bar',
        data: [18500, 16800, 15200, 14600, 12800, 11500, 9800, 8200],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  }

  chart.setOption(option)
  
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    renderGrowthChart()
    renderAgeChart()
    renderRegionChart()
  })
})
</script>

<style scoped>
.user-overview-report {
  padding: 20px 0;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-left: 4px solid #409EFF;
  padding-left: 12px;
}

.metrics-section {
  margin-bottom: 30px;
}

.metric-card {
  height: 120px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.metric-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 16px;
}

.metric-icon {
  margin-right: 16px;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.metric-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.metric-change.increase {
  color: #67C23A;
}

.metric-change.decrease {
  color: #F56C6C;
}

.chart-section,
.distribution-section,
.activity-section {
  margin-bottom: 30px;
}

.chart-container {
  height: 400px;
  width: 100%;
}

.distribution-section .chart-container {
  height: 300px;
}

.activity-section .el-table {
  margin-top: 16px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .metric-value {
    font-size: 20px;
  }
  
  .chart-container {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .metric-content {
    flex-direction: column;
    text-align: center;
  }
  
  .metric-icon {
    margin-right: 0;
    margin-bottom: 8px;
  }
}
</style>
